<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ msg }}</h1>
      <jack v-if="flag"></jack>
    </div>
    <!-- 父组件执行 beforeCreate created beforeMount -> (挂载的有子组件) 子组件 beforeCreate created beforeMount mounted -> 父组件mounted
		 父组件挂载完毕,子组件初始并未渲染,后期修改flag 让子组件渲染
		 父组件beforeUpdate
		     子组件 beforeCreate created beforeMount mounted 
		 父组件updated		 
	-->
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.component("jack", {
        template: `
          <div>我是jack组件</div>
        `,
        beforeCreate() {
          console.log("jack beforeCreate");
        },
        created() {
          // 这里面一般发送请求
          console.log("jack created");
        },
        beforeMount() {
          console.log("jack beforeMount");
        },
        mounted() {
          console.log("jack mounted");
        },
        beforeUpdate() {
          console.log("jack beforeUpdate");
        },
        updated() {
          console.log("jack updated");
        },
        beforeDestroy() {
          console.log("jack beforeDestroy");
        },
        destroyed() {
          console.log("jack destroyed");
        },
      });

      // 八大生命周期函数: 这些生命周期函数, 会在vue的生命周期的不同阶段, 会自动被vue调用
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "hello vue",
          list: [],
          flag: false,
        },
        beforeCreate() {
          console.log("vm - beforeCreate");
        },
        created() {
          console.log("vm - created");
        },
        beforeMount() {
          console.log("vm - beforeMount");
        },
        mounted() {
          console.log("vm - mounted");
        },
        beforeUpdate() {
          console.log("vm - beforeUpdate");
        },
        updated() {
          console.log("vm - updated");
        },
        beforeDestroy() {
          console.log("vm - beforeDestroy");
        },
        destroyed() {
          console.log("vm - destroyed");
        },
      });
    </script>
  </body>
</html>
